<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../framework/header.jsp" />
<link href="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	<div id="container"
		class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">
	
		<jsp:include page="../framework/topper.jsp" />
		<div class="boxed">
			<%--=======================  页面主体内容  ============================--%>
			<div id="content-container">
				<div class="wrappers">
					<%--=========================  页面标题  ==========================--%>
					<div id="page-title">
						<p class="page-header text-overflow table-header">
							基本表格&nbsp;&nbsp;<small>说明文字</small>
						</p>
					</div>
					<ol class="breadcrumb">
						<li><a href="#">UI样式</a></li>
						<li class="active">基本表格</li>
					</ol>
					<div id="page-content">
						<div class="panel">
							<div class="panel-heading">
								<!-- <div class="panel-control">
					            	<div class="columns columns-right btn-group pull-right">
											<button class="btn btn-default" type="button" name="refresh" aria-label="refresh" title="刷新">
												<i class="fa fa-rotate-left"></i>
											</button>
											<button class="btn btn-default" type="button" name="refresh" aria-label="refresh" title="刷新">
												<i class="glyphicon glyphicon-refresh icon-refresh"></i>
											</button>
											<button class="btn btn-default" type="button" name="toggle" aria-label="toggle" title="切换">
												<i class="glyphicon glyphicon-th-large icon-list-alt"></i>
											</button>
											<div class="keep-open btn-group" title="列">
												<button type="button" aria-label="columns" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
													<i class="glyphicon glyphicon-th-list icon-th"></i> <span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu"><li role="menuitem"><label><input type="checkbox" data-field="appName" value="0" checked="checked"> 应用名称</label></li><li role="menuitem"><label><input type="checkbox" data-field="appShortName" value="1" checked="checked"> 应用简称</label></li><li role="menuitem"><label><input type="checkbox" data-field="appGroup" value="2" checked="checked"> 应用组</label></li><li role="menuitem"><label><input type="checkbox" data-field="appTypeDesc" value="3" checked="checked"> 应用类型</label></li><li role="menuitem"><label><input type="checkbox" data-field="osTypeDesc" value="4" checked="checked"> 操作系统</label></li><li role="menuitem"><label><input type="checkbox" data-field="instanceCount" value="5" checked="checked"> 实例数量</label></li><li role="menuitem"><label><input type="checkbox" data-field="" value="6" checked="checked"> 操作</label></li></ul>
											</div>
										</div>
					            </div> -->
								<div class ="panel-title">成员信息</div>
							</div>
							<div class="panel-body pad-top-no">
								<div id="toolbar">
									<form id="search_form" class="form-inline">
										<label class="control-label width-auto" for="appGroup">应用分组</label>
										<select class="form-control" id="appGroup" name="appGroup">
											<option value="">请选择分组</option>
												
												<option value="edas">edas</option>
												
												<option value="xyt">xyt</option>
												
										</select>
										<label class="control-label width-auto" for="appName">应用查询</label>
										<div class="input-group">
											<input id="appName" name="appName" type="text" placeholder="请输入" class="form-control">
										  	<span class="input-group-btn" onclick="searchForm();">
												<a class="btn btn-icon btn-hover-primary" type="button">
													<i class="fa fa-search" ></i>
												</a>
											</span>
										</div>
									<a class="btn btn-primary pull-right" onclick="addApp()" style="margin-top: 2px;">
										<i class="fa fa-plus"></i>新建应用
									</a>
									</form>
								</div>
                                  <table id="sysNumber" class="table" data-single-select="true" data-toolbar="#toolbar" data-show-refresh="true"
               						data-show-toggle="true" data-show-columns="true" data-buttons-class="hover-primary">
                                      <thead>
								        <tr>
								            <th data-field="state" data-checkbox="true"></th>
								            <th data-field="id"  data-formatter="invoiceFormatter">Item ID</th>
								            <th data-field="name" >Item Name</th>
								            <th data-field="price" >Item Price</th>
								            <th data-align="center" data-width="140" data-formatter="pref_btns">操作</th>
								        </tr>
								    </thead>
                                  </table>
							</div>
						</div>
						<div class="panel">
							<div class="panel-heading">
								<div class ="panel-title">成员信息</div>
							</div>
							<div class="panel-body pad-top-no">
								<div id="toolbar2">
									<form id="search_form" class="form-inline">
										<label class="control-label width-auto" for="appGroup">应用分组</label>
										<select class="form-control" id="appGroup" name="appGroup">
											<option value="">请选择分组</option>
												
												<option value="edas">edas</option>
												
												<option value="xyt">xyt</option>
												
										</select>
										<label class="control-label width-auto" for="appName">应用查询</label>
										<div class="input-group">
											<input id="appName" name="appName" type="text" placeholder="请输入" class="form-control">
										  	<span class="input-group-btn" onclick="searchForm();">
												<a class="btn btn-icon btn-hover-primary" type="button">
													<i class="fa fa-search" ></i>
												</a>
											</span>
										</div>
									<a class="btn btn-primary pull-right" onclick="addApp()" style="margin-top: 2px;">
										<i class="fa fa-plus"></i>新建应用
									</a>
									</form>
								</div>
								
                                  <table id="sysNumber2" class="table" data-toolbar="#toolbar2" data-show-refresh="true"
               						data-show-toggle="true" data-show-columns="true" data-buttons-class="hover-primary">
                                      <thead>
								        <tr>
								            <th data-field="state" data-checkbox="true"></th>
								            <th data-field="id"  data-formatter="invoiceFormatter">Item ID</th>
								            <th data-field="name" >Item Name</th>
								            <th data-field="price" >Item Price</th>
								            <th data-align="center" data-width="140" data-formatter="pref_btns">操作</th>
								        </tr>
								    </thead>
                                  </table>
							<!-- 	<div class="empty_wrapper">暂无可用项   <span class="text-success">class="empty_wrapper"</span></div>
							 --></div>
						</div>
						<div class="panel">
							<div class="panel-heading">
								<div class ="panel-title">成员信息</div>
							</div>
							<div class="panel-body pad-top-no">
								<div id="toolbar3">
									<form id="search_form" class="form-inline">
										<label class="control-label width-auto" for="appGroup">应用分组</label>
										<select class="form-control" id="appGroup" name="appGroup">
											<option value="">请选择分组</option>
												
												<option value="edas">edas</option>
												
												<option value="xyt">xyt</option>
												
										</select>
										<label class="control-label width-auto" for="appName">应用查询</label>
										<div class="input-group">
											<input id="appName" name="appName" type="text" placeholder="请输入" class="form-control">
										  	<span class="input-group-btn" onclick="searchForm();">
												<a class="btn btn-icon btn-hover-primary" type="button">
													<i class="fa fa-search" ></i>
												</a>
											</span>
										</div>
									<a class="btn btn-primary pull-right" onclick="addApp()" style="margin-top: 2px;">
										<i class="fa fa-plus"></i>新建应用
									</a>
									</form>
								</div>
								<table id="userNumber" class="table" 
					            	data-classes="table table-no-bordered table-hover table-striped " 
					            	data-toolbar="#toolbar3" data-show-refresh="true"
               						data-show-toggle="true" data-show-columns="true" data-buttons-class="hover-primary">
                                       <thead>
								        <tr>
								            <th data-field="state" data-checkbox="true"></th>
								            <th data-field="id"  data-formatter="invoiceFormatter">Item ID</th>
								            <th data-field="name" >Item Name</th>
								            <th data-field="price" >Item Price</th>
								            <th data-align="center" data-width="140" data-formatter="pref_btns">操作</th>
								        </tr>
								    </thead>
                                  </table>
							</div>
						</div>
					<%-- 应用组件、paas组件tab页 begin --%>
					<div class="tab-base">
						<ul id="myTabs" class="nav nav-tabs">
							<li class="active">
								<a data-toggle="tab" href="#package" >应用组件(应用组件应用组件应用组件应用组件应用组件应用组件应用组件)</a>
							</li>
							<li>
								<a data-toggle="tab" href="#paas">PaaS组件</a>
							</li>
						</ul>

						<div id="myTabContent" class="tab-content">
							<%-- 应用组件tab页内容  begin --%>
							<div id="package" class="tab-pane fade active in">
								<div class="panel">
							<div class="panel-heading">
								<div class ="panel-title">成员信息</div>
							</div>
                            <div class="panel-body pad-top-no">
								<div id="toolbar4">
									<form id="search_form" class="form-inline">
										<label class="control-label width-auto" for="appGroup">应用分组</label>
										<select class="form-control" id="appGroup" name="appGroup">
											<option value="">请选择分组</option>
												
												<option value="edas">edas</option>
												
												<option value="xyt">xyt</option>
												
										</select>
										<label class="control-label width-auto" for="appName">应用查询</label>
										<div class="input-group">
											<input id="appName" name="appName" type="text" placeholder="请输入" class="form-control">
										  	<span class="input-group-btn" onclick="searchForm();">
												<a class="btn btn-icon btn-hover-primary" type="button">
													<i class="fa fa-search" ></i>
												</a>
											</span>
										</div>
									<a class="btn btn-primary pull-right" onclick="addApp()" style="margin-top: 2px;">
										<i class="fa fa-plus"></i>新建应用
									</a>
									</form>
								</div>
								<table id="userTable" class="table" 
					            	data-classes="table table-no-bordered table-hover table-striped " 
					                data-toolbar="#toolbar4" data-show-refresh="true"
               						data-show-toggle="true" data-show-columns="true" data-buttons-class="hover-primary">
                                      <thead>
								        <tr>
								            <th data-field="state" data-checkbox="true"></th>
								            <th data-field="id"  data-formatter="invoiceFormatter">Item ID</th>
								            <th data-field="name" >Item Name</th>
								            <th data-field="price" >Item Price</th>
								            <th data-align="center" data-width="140" data-formatter="pref_btns">操作</th>
								        </tr>
								    </thead>
                                  </table>
							</div>
						</div>
					</div>
					<%-- 应用组件tab页内容  end --%>
					<%-- PaaS组件tab页内容  begin --%>
					<div id="paas" class="tab-pane fade">
						<div class="panel">
							<div class="panel-heading">
								<div class ="panel-title">成员信息</div>
							</div>
                           	<div class="panel-body pad-top-no">
								<div id="toolbar5">
									<form id="search_form" class="form-inline">
										<label class="control-label width-auto" for="appGroup">应用分组</label>
										<select class="form-control" id="appGroup" name="appGroup">
											<option value="">请选择分组</option>
												
												<option value="edas">edas</option>
												
												<option value="xyt">xyt</option>
												
										</select>
										<label class="control-label width-auto" for="appName">应用查询</label>
										<div class="input-group">
											<input id="appName" name="appName" type="text" placeholder="请输入" class="form-control">
										  	<span class="input-group-btn" onclick="searchForm();">
												<a class="btn btn-icon btn-hover-primary" type="button">
													<i class="fa fa-search" ></i>
												</a>
											</span>
										</div>
									<a class="btn btn-primary pull-right" onclick="addApp()" style="margin-top: 2px;">
										<i class="fa fa-plus"></i>新建应用
									</a>
									</form>
								</div>
								<table id="peppleTable" class="table" 
					            	data-classes="table table-hover table-striped " 
					            	data-toolbar="#toolbar5" data-show-refresh="true"
               						data-show-toggle="true" data-show-columns="true" data-buttons-class="hover-primary">
                                      <thead>
								        <tr>
								            <th data-field="state" data-checkbox="true"></th>
								            <th data-field="id"  data-formatter="invoiceFormatter">Item ID</th>
								            <th data-field="name" >Item Name</th>
								            <th data-field="price" >Item Price</th>
								            <th data-align="center" data-width="140" data-formatter="pref_btns">操作</th>
								        </tr>
								    </thead>
                                  </table>
							</div>
						</div>
					</div>
					<%-- PaaS组件tab页内容  end --%>
					</div>
				</div>
				<!-- 空白页提示 -->
				<div class="panel">
					<div class="panel-heading">
						<div class ="panel-title">其他页面空白展示</div>
					</div>
					<div class="panel-body">
						<div class="panel emptyPage" id="100">
							<div class="panel-body">
								<div class="row">
									<div class = "col-sm-12" style="text-align:center;">
										<img alt="image" src="static/images/noneItem.png" style="height:196px;width:200px">
									</div>
								</div>
								<div class="row">
									<div class ="col-sm-12"style="text-align:center;">
										<p style="margin: 5px 0 20px 0;font-size:14px;">暂无可用项</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

		<%--=========================  过程可视化消息栏  ==========================--%>
		<jsp:include page="../framework/aside.jsp" />

		<%--=========================  左侧菜单  ==========================--%>
		<jsp:include page="../framework/lefter.jsp" />

	</div>

	<%--=========================  页面底部版权信息  ==========================--%>
	<jsp:include page="../framework/footer.jsp" />
	<%--=========================  选择皮肤功能  ==========================--%>
	<jsp:include page="../framework/page-set.jsp" />
</div>
	<div id="floating-top-right" class="floating-container"></div>
<%--===================================================--%>
<%-- END OF CONTAINER --%>

<jsp:include page="../framework/script.jsp" />
	<script src="${pageContext.request.contextPath}/static/js/common/bootdatatable.init.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	
	
	<script type="text/javascript">
var sysId = getCookie('sysId');

/* tab页面切换 */
var myclick = function(v) {
	var llis = document.getElementsByTagName("li");
	for(var i = 0; i < llis.length; i++) {
		var lli = llis[i];
		if(lli == document.getElementById("tab" + v)) {
			//lli.style.color = "#999999";
			$("#tab  i").css("color","#ffffff");
		} else {
			lli.style.color = "#26a0f5";
		}
	}

}

$(function() {
	//加载表格
	$('#sysNumber').bootdatagrid(
			"${pageContext.request.contextPath}/static/plugin/bootstrap-table/demo.server.json", {
				pagination : true,
				pageNumber : 1,
				pageSize : 10,
				dataType:'json',
				singleSelect : false,
				striped : true,
				clickToSelect : true
	});
	
	$('#sysNumber2').bootdatagrid(
			"${pageContext.request.contextPath}/static/plugin/bootstrap-table/demo.server.json", {
				pagination : true,
				pageNumber : 1,
				pageSize : 10,
				dataType:'json',
				singleSelect : false,
				striped : true,
				clickToSelect : true
	});
	//加载表格
	$('#userNumber').bootdatagrid(
			"${pageContext.request.contextPath}/static/plugin/bootstrap-table/demo.server.json", {
				pagination : true,
				pageNumber : 1,
				pageSize : 10,
				dataType:'json',
				singleSelect : false,
				striped : true,
				clickToSelect : true
	});	
	//加载表格
	$('#peppleTable').bootdatagrid(
			"${pageContext.request.contextPath}/static/plugin/bootstrap-table/demo.server.json", {
				pagination : true,
				pageNumber : 1,
				pageSize : 10,
				dataType:'json',
				singleSelect : false,
				striped : true,
				clickToSelect : true
	});
	//加载表格
	$('#userTable').bootdatagrid(
			"${pageContext.request.contextPath}/static/plugin/bootstrap-table/demo.server.json", {
				pagination : true,
				pageNumber : 1,
				pageSize : 10,
				dataType:'json',
				singleSelect : false,
				striped : true,
				clickToSelect : true
	});
			
			
})
function invoiceFormatter(value,row,index){
	return 'ID '+value;
}
function pref_btns(value,row,index){
	var btns = '';
	btns += '<a class="btn-table-cell" onclick="tablebtnclick(this);">删除</a>';
	btns += ' | <a class="btn-table-cell" onclick="tablebtnclick(this);">编辑</a>';
	btns += ' | <a class="btn-table-cell" data-toggle="tooltip" data-container="body" data-placement="top" title="日志日志">日志</a>';
	return btns;
}

function tablebtnclick(e){
	Alert.success($(e).text());
}
</script>
</body>
</html>

